<template>
  <!-- '添加学科'对话框和'修改学科'对话框 -->
  <el-dialog class='subjectDialog-container' :title="title" :visible.sync="dialogVisible"
    :before-close="()=>$emit('update:dialogVisible', false)" width="30%" @closed='resetForm'>
    <!-- 表单区域 -->
    <el-form ref="subjectFormRef" :rules='subjectFormRules' :model="subjectForm" label-width="80px">
      <!-- 学科名称 -->
      <el-form-item label="学科名称" prop='subjectName'>
        <el-input v-model="subjectForm.subjectName"></el-input>
      </el-form-item>
      <!-- 是否显示 -->
      <el-form-item label="是否显示">
        <el-switch v-model="subjectForm.isFrontDisplay"></el-switch>
      </el-form-item>
    </el-form>
    <!-- 底部按钮区域 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:dialogVisible',false)">取 消</el-button>
      <el-button type="primary" @click="onConfrim">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { add, update } from '@/api/hmmm/subjects'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    subjectInfo: {
      type: Object,
      default: () => { return {} }
    }
  },
  data () {
    return {
      // 表单数据
      subjectForm: {
        // 学科名称
        subjectName: this.subjectInfo.subjectName || '',
        // 是否在页面显示 1是 0否
        isFrontDisplay: this.subjectInfo.subjectName ? this.subjectInfo.isFrontDisplay === 1 : true
      },
      // 表单的验证规则
      subjectFormRules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onConfrim () {
      // 通过表单实例对表单数据进行预验证
      this.$refs.subjectFormRef.validate(async valid => {
        // 如果预验证没通过,就停止执行下面的代码
        if (!valid) return
        // 如果是添加学科
        if (this.title === '新增学科') {
          try {
            // 发送请求
            await add({
              subjectName: this.subjectForm.subjectName,
              isFrontDisplay: this.subjectForm.isFrontDisplay ? 1 : 0
            })
            // 关闭对话框
            this.$emit('update:dialog-visible', false)
            // 更新父组件的视图
            this.$emit('update-list')
            // 提示成功的消息
            this.$message.success('添加学科成功')
            // 重置表单
            this.resetForm()
          } catch (err) {
            // 如果请求失败
            this.$message.fail('添加学科失败，请稍后再试')
          }
        } else {
          // 如果是修改学科名称
          try {
            // 发送请求
            await update({
              id: this.subjectInfo.id,
              subjectName: this.subjectForm.subjectName,
              isFrontDisplay: this.subjectForm.isFrontDisplay ? 1 : 0
            })
            // 关闭对话框
            this.$emit('update:dialog-visible', false)
            // 更新父组件的视图
            this.$emit('update-list')
            // 提示成功的消息
            this.$message.success('修改学科成功')
            // 重置表单
            this.resetForm()
          } catch (err) {
            // 如果请求失败
            this.$message.fail('修改学科失败，请稍后再试')
          }
        }
      })
    },
    // 重置表单的方法
    resetForm () {
      this.$refs.subjectFormRef.resetFields()
    }
  },
  created () {
  }
}
</script>

<style scoped lang='scss'>
// 对话框样式
.subjectDialog-container ::v-deep.el-dialog__footer {
  text-align: right !important;
}
</style>
